<template>
  <div>
    <VolBox
      :model.sync="model.boxOne"
      :title="shuju.Qiantui == 2 ? '签退码' : '签到码'"
      :width="800"
      :height="500"
    >
      <div class="button_box">
        <div
          class="el-icon-plus button_item"
          @click="
            () => {
              this.model.boxThree = true;
            }
          "
        >
          &nbsp;添加
        </div>
        <div></div>
        <!-- <div
          class="el-icon-plus button_item"
          @click="
            () => {
              this.$refs.table_one.addRow();
            }
          "
        >
          &nbsp;添加
        </div> -->
        <!-- <div
          class="el-icon-close button_item"
          @click="
            () => {
              this.$refs.table_one.delRows();
            }
          "
        >
          &nbsp;删除行
        </div> -->
      </div>

      <div class="table_box">
        <vol-table
          v-show="table_one"
          ref="table_one"
          :loadKey="true"
          :columns="columns"
          :height="210"
          :defaultLoadPage="false"
          :row-index="true"
          :columnIndex="true"
          :index="true"
          :click-edit="true"
          :tableData="tableData"
          :paginationHide="true"
        ></vol-table>
      </div>

      <!-- <div slot="footer">
        <Button type="default" @click="onSave()">确认</Button>
        <Button
          type="default"
          @click="
            () => {
              this.model.boxTwo = false;
            }
          "
          >关闭</Button
        >
      </div> -->
    </VolBox>
    <VolBox
      :model.sync="model.boxTwo"
      title="签到记录"
      :width="500"
      :height="300"
    >
      <div class="table_box">
        <vol-table
          v-show="table_one"
          ref="table_two"
          :loadKey="true"
          :columns="attendanceRecord"
          :height="210"
          :defaultLoadPage="false"
          :row-index="true"
          :columnIndex="true"
          :index="true"
          :click-edit="true"
          :tableData="attendanceRecordData"
          :paginationHide="true"
        ></vol-table>
      </div>
    </VolBox>
    <VolBox
      :model.sync="model.boxThree"
      title="入口"
      :width="500"
      :height="300"
    >
      <VolForm
        :loadKey="true"
        ref="formFieldsreset"
        :formFields="formFields1"
        :formRules="formRules1"
      ></VolForm>
      <div slot="footer">
        <Button type="default" @click="onSave()">确认</Button>
        <Button
          type="default"
          @click="
            () => {
              this.model.boxThree = false;
            }
          "
          >关闭</Button
        >
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from "@/components/basic/VolBox.vue";
import Icons from "@/components/basic/Icons.vue";
import VolForm from "@/components/basic/VolForm.vue";

export default {
  components: {
    VolTable,
    Icons,
    VolBox,
    VolForm
  },
  data() {
    return {
      rowChild: {},
      spare11: 0,
      FormPopup: {
        coupon_value: "",
        type: ""
      },
      model: {
        boxOne: false,
        boxTwo: false,
        boxThree: false
      },
      formRules1: [
        [
          {
            title: "入口编码",
            field: "entryCode",
            type: "string",
            required: true,
            colSize: 8
          }
        ],
        [
          {
            title: "入口昵称",
            field: "entryNickname",
            type: "string",
            required: true,
            colSize: 8
          }
        ]
      ],
      formFields1: {
        entryNickname: "",
        entryCode: "",
        type: "",
        campsiteld: "",
        phase_id_fk: "",
        signinNumber: 0,
        signinCode: 0
      },
      shuju: {},
      options: [],
      typeList: [],
      elementIdex: [],
      // 表格显示隐藏
      table_one: true,
      table_two: false,
      coupValuStatused: false,
      couponStatused: false,
      IsStaused: false,
      IsInputStaused: false,
      cascaderValueData: [],
      InputData: "",
      radio: "1",
      hotelData: "",
      hotelTypeList: [],
      RoomList: [],
      RoomData: "",
      objArr: [],
      // 商品管理表格
      tableData: [],
      tableDatabefore: [],
      columns: [
        {
          field: "entryCode",
          title: "入口编码",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true
        },
        {
          field: "entryNickname",
          title: "入口昵称",
          type: "int",
          width: 90,
          align: "left",
          sortable: true
        },
        {
          field: "spare",
          title: "已签到人数",
          type: "string",
          width: 120,
          align: "left",
          hidden: true
        },
        {
          field: "children",
          title: "签到码",
          type: "decimal",
          width: 90,
          align: "left",
          sortable: true,
          hidden: true
        },

        {
          field: "Render",
          title: "操作",
          fixed: "right",
          width: 160,
          render: this.getRenderOperate()
        }
      ],
      //套票项表格
      attendanceRecordData: [],
      attendanceRecord: [
        {
          field: "name",
          title: "姓名",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
          edit: { type: "text", required: true }
        },
        {
          field: "childphone",
          title: "孩子电话",
          type: "string",
          width: 120,
          align: "left",
          hidden: false,
          require: true,
          edit: { type: "text", required: true }
        },
        {
          field: "time",
          title: "签到时间",
          type: "string",
          width: 120,
          align: "left"
        }
      ]
    };
  },
  created() {
    this.resetSearch(); // 清空表格数据

    this.http
      .get("/api/SupplierNews/GetSupplierProduct", { type: 1 })
      .then(res => {
        if (res.code == 200) {
          this.$nextTick(() => {
            function arrReduce(someArr) {
              for (let i = 0; i < someArr.length; i++) {
                if (someArr[i].children.length != 0) {
                  arrReduce(someArr[i].children);
                  someArr[i].label = someArr[i].label;
                  someArr[i].value = someArr[i].value;
                } else {
                  someArr[i].label = someArr[i].label;
                  someArr[i].value = someArr[i].value;
                  someArr[i].children = null;
                }
              }
              return someArr;
            }
            this.options = arrReduce(res.data);
          });
        }
      });
  },
  methods: {
    // 重置表
    resetSearch() {
      this.table_one = true;
      this.table_two = false;
      this.tableData = [];
    },
    // 表格赋值数据

    //获取下拉酒店名称
    del(row) {
      this.$confirm(
        "确认要删除此行数据【" + row.ProductName + "】？？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认删除",
          cancelButtonText: "取消"
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "提交删除请求"
          });
        })
        .catch(action => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "放弃删除" : "停留在当前页面"
          });
        });
    },
    getRenderOperate() {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: e => {
                  console.log(row, "row");
                  this.model.boxTwo = true;
                  this.isAttendanceRecordData(row.id);
                }
              }
            },
            "签到记录    "
          ),
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: e => {
                  console.log(row, "row");
                  this.$Modal.confirm({
                    title: "删除警告!",
                    content:
                      '<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
                    onOk: () => {
                      this.http
                        .post("api/camp_signin_signout/DelCampSign", {
                          ids: [row.id]
                        })
                        .then(res => {
                          this.$Message.success("删除成功");
                          this.campSigninSignout();
                        });
                    }
                  });
                }
              }
            },
            "删除"
          )
        ]);
      };
    },
    closeChild() {
      this.model.box = false;
      this.isOrther();
    },
    onSave() {
      if (this.shuju.campsiteId != "" && this.shuju.phase_id_fk != "") {
        //  2是签退
        if (this.shuju.Qiantui == 2) {
          this.formFields1.campsiteld = this.shuju.campsiteId;
          this.formFields1.phase_id_fk = this.shuju.phase_id_fk;
          this.formFields1.type = 2;
          // this.tableData.forEach(item => {
          //   item.type = 2;
          //   item.campsiteId = this.shuju.campsiteId;
          //   item.phase_id_fk = this.shuju.phase_id_fk;
          // });
          // console.log(this.tableData, "this.tableData");
        } else {
          // this.tableData.forEach(item => {
          //   item.type = 1;
          // });
          this.formFields1.campsiteld = this.shuju.campsiteId;
          this.formFields1.phase_id_fk = this.shuju.phase_id_fk;
          this.formFields1.type = 1;
        }
      }
      let param = { mainData: this.formFields1 };
      this.http
        .post("/api/camp_signin_signout/AddCampSign", param)
        .then(res => {
          if (res.status) {
            this.$Message.success("入口添加成功");
            this.campSigninSignout();
            this.model.boxThree = false;
          } else {
            this.$Message.error("入口添加失败");
            this.model.boxThree = false;
          }
        });
    },
    //查询入口
    campSigninSignout() {
      let params = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "id",
        wheres: `[{\"name\":\"phase_id_fk\",\"value\":\"${this.shuju.phase_id_fk}\",\"displayType\":\"text\"},{\"name\":\"type\",\"value\":\"${this.shuju.Qiantui}\",\"displayType\":\"text\"}]`
      };
      this.http
        .post("/api/camp_signin_signout/GetCampSignPageData", params)
        .then(res => {
          console.log(res, "");
          this.tableData = res.rows;
        });
    },
    isAttendanceRecordData(v) {
      let params = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "id",
        wheres: `[{\"name\":\"camp_signin_signout_Id\",\"value\":\"${v}\",\"displayType\":\"text\"}]`
      };
      this.http
        .post(
          "/api/camp_signin_signout_record/GetCampSignRecordPageData",
          params
        )
        .then(res => {
          this.attendanceRecordData = res.rows;
        });
    },
    open2(row) {
      console.log(row, "this.model.boxOne");
      this.shuju = row;
      if (row.campsiteId != "" && row.phase_id_fk != "") {
        this.shuju = row;
        //  2是签退
        // if (this.shuju.Qiantui == 2) {
        //   this.tableData.forEach(item => {
        //     item.type = 2;
        //     item.campsiteId = this.shuju.campsiteId;
        //     item.phase_id_fk = this.shuju.phase_id_fk;
        //   });
        //   console.log(this.tableData, "this.tableData");
        // } else {
        //   this.tableData.forEach(item => {
        //     item.type = 1;
        //   });
        // }
        this.campSigninSignout();
        this.model.boxOne = true;
      } else {
        this.$message.error("请填写营期和营种");
      }
    }
  }
};
</script>
<style lang="less" scoped>
.casd {
  margin: 20px 5px;
}
.from_table_box {
  background: white;
  margin-top: 15px;
  .header_box {
    display: flex;
    justify-content: space-between;
    padding: 3px 15px;
    .tab {
      display: flex;

      .tab_item {
        line-height: 28px;
        font-size: 14px;
        margin-bottom: 0;
        color: #828282;
        padding: 0 8px;
        &.tab_item:hover {
          color: #82aaf1;
          cursor: pointer;
        }
        &.tab_item_click {
          font-weight: bolder;
          border-bottom: 2px solid #03a9f4;
        }
      }
    }
    .button_box {
      display: flex;
      margin-right: 12px;
      .button_item {
        margin-left: 19px;
        line-height: 28px;
        border: 0px;
        color: #009688;
        &.button_item:hover {
          cursor: pointer;
          color: #ff9800;
          border-color: #ff9800;
          border: none;
        }
      }
    }
  }
}
</style>
